<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.7.1.min.js"></script>
		<style>
			.one{
				background-color: #ADD8E6;
			}
		</style>
	</head>
	<body>
		
		<div id="div01">1</div>
		<div class="one">2</div>
		
		<script>
			
			// jQuery的核心对象
			console.log($);
			
			// 1.设置对象内容
			$("#div01").text("你好，jQuery");
			$("#div01").html("<a href='https://www.baidu.com'>百度</a>");
			
			// 2.通过选择器找到对象
			$("div").css("background-color","lightblue")
			// 类别选择器
			$(".one").css("background-color","red")
			
		</script>
		用户名：<input type="text" id="username" /><br/>
		<script>
			
			// 3.获取和设置值
			console.log($("#div01").text())
			$("#username").val("abc")
			console.log($("#username").val())
			
		</script>
		
		<div id="div05" abc="aaa"></div>
		<script>
			// 获取访问对象的属性
			// attr() 普通属性
			// prop() 有5个只读属性 如offsetX
			
			// 提供1个参数，得到这个属性值
			console.log($("#div05").attr("abc"))
			// 提供2个参数，设置这个属性的值
			$("#div05").attr("name","bbbb")
			// 移除属性
			$("#div05").removeAttr("name")
		</script>
		
		<div id="div06"></div>
		<script>
			// 5.设置样式 .css()
			$("#div06").css("width","50px");
			$("#div06").css("height","50px");
			$("#div06").css("background-color","green");
		</script>
		
		<div id="div07" style="width:50px;height: 50px;"></div>
		<button id="btn07a">添加</button>
		<button id="btn07b">切换</button>
		<button id="btn07c">删除</button>
		<script>
			$("#btn07a").click(function(){
				$("#div07").addClass("one");
			});
			$("#btn07c").click(function(){
				$("#div07").removeClass("one");
			});
		</script>
		
	</body>
</html>
